<template>
  <div class="mainDiv">
    <mt-cell class="headTit h60">
      <div slot="title">
       您所收藏的志愿目前总共有<b class="padlr10">{{types[0].totalCount+types[1].totalCount+types[2].totalCount}}</b>个，您可以进入智能志愿智能选择您所想要的志愿！
      </div>
    </mt-cell>
    <div class="line"></div>
    <mt-navbar v-model="rank">
      <mt-tab-item :id="type.rank" v-for="(type,index) in types"><span style="font-size: 16px">{{type.title}}</span>
        <mt-badge :type="index==0?'error':(index==1?'primary':'success')" >{{type.totalCount}}</mt-badge>
      </mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="rank" style="margin-bottom: 60px">
      <mt-tab-container-item :id="type.rank" v-for="type in types">
        <div  v-infinite-scroll="loadMore(type)" infinite-scroll-disabled="type.disableLoading" infinite-scroll-distance="10" style="padding-top: 5px">
          <div class="major"  v-for="cell in type.data"  >
            <div class="pad5">{{cell.school_full_name}}</div>
            <div  class="pad5 cellLabel"><span v-for="label in cell.labels" v-show="label">{{label}}</span></div>
            <div class="pad5"><b>{{cell.majorName}}</b></div>
            <!-- <table>
              <tr><td><label class="smallLable">学制(年):</label> </td><td class="cellVal">{{cell.schooling_length}}</td>
                <td><label class="smallLable">专业层次:</label></td><td class="cellVal">{{cell.majorLevel}}</td>
                <td><label class="smallLable">招生计划:</label></td><td class="cellVal">{{cell.pepole_num2}}</td>
              </tr>
              <tr>
                <td> <label class="smallLable">学费:</label></td><td class="cellVal"> {{cell.fee}}/年</td>
                <td><label class="smallLable">选考科目:</label></td><td class="cellVal" colspan="3">{{cell.subject}}</td>
              </tr>
              <tr><td><label class="smallLable">2017年最低分:</label> </td><td class="cellVal">{{cell.join_score}}</td>
                <td><label class="smallLable">录取最低位次:</label> </td><td class="cellVal">{{cell.join_rank}}</td>
                <td><label class="smallLable">批次:</label></td><td>{{cell.batch}}</td></tr>
            </table> -->
            <table class="schoolTab">
              <tr><td><label class="smallLable">学制(年)：</label>{{cell.schooling_length}}</td>
                  <td><label class="smallLable">专业层次：</label>{{cell.majorLevel}}</td>
                  <td><label class="smallLable">招生计划：</label>{{cell.pepole_num2}}</td>
              </tr>
              <tr>
                <td> <label class="smallLable">学费：</label> {{cell.fee}}/年</td>
                <td colspan="2"><label class="smallLable">选考科目：</label>{{cell.subject}}</td>
               </tr>
              <tr>
                <!--<td style="padding-right:5px"><label class="smallLable">2017年最低分：</label>{{cell.join_score}}</td>-->
                <td style="padding-right:5px"><label class="smallLable">参考位次：</label>{{cell.join_rank}}</td>
                 <td><label class="smallLable">批次:</label>{{cell.batch}}</td>
              </tr>
            </table>
            <span class="collectBtn"  @click="delCollection(type,cell)">删除</span>
            <div class="chance">
              <div class="figure">{{cell.chance}}%</div>
              <label >录取概率</label>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>

    <mt-button class="download" type="primary" size="small" @click="downloadCollections">导出</mt-button>
  </div>

</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "collections",
        data(){ return{
           rank:1,
           statics:{a:0,b:0,c:0},
           types:[{rank:1,title:"冲",pageIndex:-1,totalCount:0,data:[],disableLoading:false},
             {rank:2,title:"稳",pageIndex:-1,totalCount:0,data:[],disableLoading:false},
             {rank:3,title:"保",pageIndex:-1,totalCount:0,data:[],disableLoading:false}]


        }},
        methods: {
          delCollection: function (type, major) {
            this.$http.get("/auth/delCollection?major_id=" + major.id).then(resp => {
              if (resp.code == 0) {
                Toast("删除成功!");
                type.totalCount--;
                type.data.splice(type.data.indexOf(major), 1);
              }
            })
          },
          loadMore: function (type) {
            if (type.disableLoading) {
              return;
            }
            type.disableLoading = true;
            let vm = this;
            let params = {pageIndex: type.pageIndex + 1, rank_inter: type.rank}

            this.$http.post("/auth/queryMajor", changeDataType(params)).then((resp) => {
              type.pageIndex = resp.data.pageIndex;
              type.pageTotal = resp.data.pageTotal;
              type.totalCount = resp.data.totalCount;
              resp.data.data.forEach(n => {
                n.labels = [];
                n.labels.push(n.sheng, n.is985, n.is211, n.schoolLevel, n.nature);
              })
              type.data.push.apply(type.data, resp.data.data);
              if (resp.data.pageIndex + 1 < resp.data.pageTotal) {
                type.disableLoading = false;
              }
            })
          },
          downloadCollections: function () {
              if(this.$root.userInfo.vip_level==1){
                if(isIos()){
                  this.$router.push({path:"/login/download",query:{studentId:this.$root.userInfo.id}})
                }else{
                  Toast("导出中...");
                  try{
                    var elemIF = document.createElement("iframe");
                    elemIF.src = "/wx/downloadCollections?studentId="+this.$root.userInfo.id;
                    elemIF.style.display = "none";
                    document.body.appendChild(elemIF);
                  }catch(e){

                  }
                }
              }else{
                Toast("该功能需升级到VIP会员方可使用，您可进入个人中心升级VIP。");
              }
          },
          created() {
            checkLogin(this);
          }
        }}
</script>

<style scoped>
  .major{
    border-bottom: 1px solid lightgray;
    width: 100%;
    padding: 10px;
    position: relative;
  }
  .cellLabel{
    color:lightskyblue;
  }
  .cellLabel span{
    padding-right: 5px;
  }
  .smallLable{
    /* color: #808080; */
    font-size: 12px;
    color: #999999;
  }
  .cellVal{
    font-size: 14px;
  }

  .collectBtn{
    width: 40px;
  line-height: 22px;
  position: absolute;
  border: 1px solid #D6D6D6;
  border-radius: 4px;
  padding: 1px 3px;
  top:10px;right: 30px;
  font-size: 70%;text-align: center;
  color: #999999;
  }
  .chance{
    position: absolute;
    right: 30px;
    bottom: 10px;
    font-family: 楷体;
  }
  .chance .figure{
    font-size: 28px;
    color:red;
  }
  .chance label{
    font-size:12px;
  }
  .download{
    border-radius: 25px;
    position: fixed ; right: 24px; bottom: 75px;
    background-color: #FF9F28;
  }
  .schoolTab tr td{
   font-size: 10px;
   color: #999999;
 }
</style>
